<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Word 转 HTML 预览</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style>
      body {
        font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC,
          Arial;
        padding: 24px;
      }
      .card {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 16px;
        max-width: 720px;
      }
      .preview {
        margin-top: 24px;
        border: 1px dashed #cbd5e1;
        padding: 16px;
        border-radius: 8px;
      }
      .tips {
        color: #64748b;
        font-size: 12px;
      }
      button {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h2>上传 .docx 文件并预览</h2>
    <div class="card">
      <form id="upload-form">
        <input type="file" name="file" accept=".docx" required />
        <button type="submit">上传并转换</button>
      </form>
      <p class="tips">仅支持 .docx。若是 .doc（97-2003），请先转换为 .docx。</p>
      <div id="result" class="preview"></div>
    </div>

    <script>
      const form = document.getElementById("upload-form");
      const result = document.getElementById("result");

      form.addEventListener("submit", async (e) => {
        e.preventDefault();
        result.innerHTML = "转换中...";

        const fd = new FormData(form);
        const res = await fetch("http://localhost:3000/upload", {
          method: "POST",
          body: fd,
        });
        if (!res.ok) {
          result.innerHTML = "上传或转换失败";
          return;
        }
        const html = await res.text();
        result.innerHTML = html;
      });
    </script>
  </body>
</html>
